﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Entities.Settings;
@using CleanArchitecture.Infrastructure.Models
@inject SecuritySettings securitySetting
@model LoginModel
@{ 
    Layout = null; 
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="~/lib/layui/css/layui.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    body {
		background-image: url("/images/front/bg-login.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		min-height: 100vh;
	}
	body:before {
		content: "";
		background-color: rgba(0, 0, 0, .2);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.login-wrapper {
		max-width: 420px;
		padding: 20px;
		margin: 0 auto;
		position: relative;
		box-sizing: border-box;
		z-index: 2;
	}
	.login-wrapper > .layui-form {
		padding: 25px 30px;
		background-color: #fff;
		box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
		box-sizing: border-box;
		border-radius: 4px;
	}
	.login-wrapper > .layui-form > h2 {
		color: #333;
		font-size: 18px;
		text-align: center;
		margin-bottom: 25px;
	}
	.login-wrapper > .layui-form > .layui-form-item {
		margin-bottom: 25px;
		position: relative;
	}
	.login-wrapper > .layui-form > .layui-form-item:last-child {
		margin-bottom: 0;
	}
	.login-wrapper > .layui-form > .layui-form-item > .layui-input {
		height: 46px;
		line-height: 46px;
		border-radius: 2px !important;
	}
	.login-wrapper .layui-input-icon-group > .layui-input {
		padding-left: 46px;
	}
	.login-wrapper .layui-input-icon-group > .layui-icon {
		width: 46px;
		height: 46px;
		line-height: 46px;
		font-size: 20px;
		color: #909399;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
	}
	.login-wrapper > .layui-form > .layui-form-item.login-captcha-group {
		padding-right: 135px;
	}
	.login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha {
		height: 46px;
		width: 120px;
		cursor: pointer;
		box-sizing: border-box;
		border: 1px solid #e6e6e6;
		border-radius: 2px !important;
		position: absolute;
		right: 0;
		top: 0;
	}
	.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox {
		margin: 0 !important;
		padding-left: 25px;
	}
	.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon {
		width: 15px !important;
		height: 15px !important;
	}
	.login-wrapper > .layui-form .layui-btn-fluid {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		border-radius: 2px !important;
	}
	.login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon {
		font-size: 26px;
	}
	.login-copyright {
		color: #eee;
		padding-bottom: 20px;
		text-align: center;
		position: relative;
		z-index: 1;
	}
	@@media screen and (min-height: 550px) {
		.login-wrapper {
			margin: -250px auto 0;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			width: 100%;
		}

		.login-copyright {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
		}
	}
	.layui-btn {
		background-color: #5FB878;
		border-color: #5FB878;
	}
	.layui-link {
		color: #5FB878 !important;
	}
	.pull-right {
		float: right;
	}
	input.smscode{
		width: 213px;
		float: left;
	}
	.smscodebutton { height: 46px; }
	.text-center {text-align: center;}
    </style>
</head>
<body>
    <div class="login-wrapper">
		<form class="layui-form">
			<h2>用户登录</h2>
			<div class="layui-form-item layui-input-icon-group">
				<i class="layui-icon layui-icon-username"></i>
				<input class="layui-input" name="@Model.nameof(m => m.LoginUser)" placeholder="请输入登录账号" autocomplete="off" lay-verify="required">
			</div>
			@if (securitySetting.CustomerLoginVerify == "passwordandcaptcha")
            {
				<div class="layui-form-item layui-input-icon-group">
					<i class="layui-icon layui-icon-password"></i>
					<input class="layui-input" name="@Model.nameof(m => m.Password)" placeholder="请输入登录密码" type="password" lay-verify="required">
				</div>
				<div class="layui-form-item layui-input-icon-group login-captcha-group">
					<i class="layui-icon layui-icon-auz"></i>
					<input class="layui-input" name="@Model.nameof(m => m.CaptchaCode)" placeholder="请输入验证码" autocomplete="off" lay-verify="required">
					<img class="login-captcha" src="/get-captcha-code" alt="看不清？点击切换">
				</div>
            }
            else if (securitySetting.CustomerLoginVerify == "smscode")
            {
				<div class="layui-form-item layui-input-icon-group">
					<i class="layui-icon layui-icon-vercode"></i>
					<input class="layui-input smscode" name="@Model.nameof(m => m.SmsCode)" placeholder="请输入短信验证码" autocomplete="off" lay-verify="required">
					<button type="button" class="layui-btn pull-right smscodebutton">获取验证码</button>
				</div>
            }

			<div class="layui-form-item">
				<input type="checkbox" name="@Model.RememberMe" title="记住密码" lay-skin="primary" @if (Model.RememberMe) { <text>checked</text> }>
				<a href="javascript:;" class="layui-link pull-right">注册账号</a>
			</div>
			<div class="layui-form-item">
				<button id="loginSubmit" class="layui-btn layui-btn-fluid" lay-filter="loginSubmit" lay-submit="">登录</button>
			</div>
			<div class="layui-form-item login-oauth-group text-center">
				<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color:#3492ed;"></i></a>
				<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color:#4daf29;"></i></a>
				<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color:#CF1900;"></i></a>
			</div>
		</form>
    </div>
    <div class="login-copyright">copyright © 2020 NetCoreCMS all rights reserved.</div>

    <!-- js部分 -->
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="~/lib/layui/layui.js"></script>
    <script type="text/javascript" src="~/js/util.min.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;

            /* 表单提交 */
            form.on('submit(loginSubmit)', function (obj) {
                // console.log(obj.field);
                var loginModel = obj.field;
                var $submitbtns = $("#loginSubmit");
				$submitbtns.html('<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>');
				$submitbtns.attr('disabled', 'disabled');
				httpapi.fetchPost('/api/frontend/login', obj.field).then(res => {
                if (!httpapi.checkResponse(res)) {
                    //输入信息校验错误
                    layer.msg(res.message, {
						icon: 5,
                    }, function () {
                            $submitbtns.attr('disabled', false);
                            $submitbtns.html('登录');
                            if (loginModel.hasOwnProperty('Password'))
                                $("input[name=Password]").val("");
                            if (loginModel.hasOwnProperty('CaptchaCode')) 
                                $("input[name=CaptchaCode]").val("");
                            if (loginModel.hasOwnProperty('SmsCode'))
                                $("input[name=SmsCode]").val("");
                            $('img.login-captcha').click();
					});   
                } else //Success
                    layer.msg(res.message, {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                            console.log(res.data);
                    });
                }).catch(error => {
                    notice.error("对不起，登录过程出现未知错误，请您联系系统管理员！");
                    console.error(error);
                });
                
            return false;
            });

            /* 图形验证码 */
            $('img.login-captcha').click(function () {
                this.src = this.src + '?t=' + (new Date).getTime();
            });

        });
    </script>

</body>
</html>
